<template>
    <view class="com">
        <view class="bottom" v-if="!center">
            <view class="loading" v-if="status === 'loading'">
                <view class="li"></view>
                <view class="li"></view>
                <view class="li"></view>
                <view class="li"></view>
                <view class="li"></view>
            </view>
            <view class="cu-load" v-if="status === 'finish'" :style="{ 'color': color }">
                <text class="txt">已经到底啦～</text>
            </view>
        </view>
        <view class="center" v-else>
            <view class="loading">
                <view class="li"></view>
                <view class="li"></view>
                <view class="li"></view>
                <view class="li"></view>
                <view class="li"></view>
            </view>
        </view>
    </view>
</template>

<script setup>
const props = defineProps({
    modelValue: { required: true },
    color: {
        type: String,
        default: '#000'
    },
    center: {
        type: Boolean,
        default: false
    }
})

const status = ref('loading')


//监听数据
watch(
    () => props.modelValue,
    (value) => {
        status.value = value
    },
    { immediate: true }
);

onMounted(() => {
    status.value = props.modelValue
});

</script>

<style lang="scss" scoped>
.com {
    
    text-align: center;

    .bottom{
        padding: 20rpx 0;
    }
    .cu-load {
        font-size: 24rpx;
        color: #000;

        .txt {
            position: relative;
            top: -2rpx;
        }
    }
}

.center{
    width: 100%;
    height: 100%;
    display: flex;
    align-items:  center;;
    justify-content: center;
    position: absolute;
    left: 0;
    top: 0;
}

.loading {
    width: 90rpx;
    height: 20rpx;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-around;
}

.loading .li {
    display: inline-block;
    width: 8rpx;
    height: 100%;
    border-radius: 4rpx;
    // margin: 0 2rpx;
    background: lightgreen;
    animation: load 1s ease infinite;
    -webkit-animation: load 1s ease infinite;
}

@keyframes load {

    0%,
    100% {
        height: 20rpx;
        background: lightgreen;
    }

    50% {
        height: 30rpx;
        margin: -8rpx 0;
        background: lightblue;
    }
}

.loading .li:nth-child(2) {
    animation-delay: 0.2s;
    -webkit-animation-delay: 0.2s;
}

.loading .li:nth-child(3) {
    animation-delay: 0.4s;
    -webkit-animation-delay: 0.4s;
}

.loading .li:nth-child(4) {
    animation-delay: 0.6s;
    -webkit-animation-delay: 0.6s;
}

.loading .li:nth-child(5) {
    animation-delay: 0.8s;
    -webkit-animation-delay: 0.8s;
}
</style>